<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security"
      th:replace="~{layout/base :: layout(~{::title}, ~{::section})}">
<head>
    <meta charset="UTF-8">
    <title>书籍请求 - 电子书下载平台</title>
</head>
<body>
    <section>
        <div class="container py-5">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2>书籍请求</h2>
                <!-- 添加新请求按钮 -->
                <div sec:authorize="isAuthenticated()">
                    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#newRequestModal">
                        <i class="fas fa-plus-circle me-2"></i>添加新请求
                    </button>
                </div>
                <div sec:authorize="!isAuthenticated()">
                    <a th:href="@{/login}" class="btn btn-primary">
                        <i class="fas fa-sign-in-alt me-2"></i>登录后添加请求
                    </a>
                </div>
            </div>
            
            <!-- 筛选栏 -->
            <div class="card mb-4">
                <div class="card-body">
                    <form th:action="@{/requests}" method="get" class="row g-3">
                        <div class="col-md-3">
                            <label for="language" class="form-label">语言</label>
                            <select id="language" name="language" class="form-select">
                                <option value="">全部</option>
                                <option value="简体中文">简体中文</option>
                                <option value="繁体中文">繁体中文</option>
                                <option value="英语">英语</option>
                                <option value="日语">日语</option>
                                <option value="其他">其他</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label for="sort" class="form-label">排序方式</label>
                            <select id="sort" name="sort" class="form-select">
                                <option value="popularity">受欢迎度</option>
                                <option value="newest">最新请求</option>
                            </select>
                        </div>
                        <div class="col-md-6 d-flex align-items-end">
                            <button type="submit" class="btn btn-outline-primary">应用筛选</button>
                            <a th:href="@{/requests}" class="btn btn-outline-secondary ms-2">重置</a>
                            <a th:href="@{/user/requests}" class="btn btn-outline-info ms-auto"
                               sec:authorize="isAuthenticated()">
                                <i class="fas fa-list me-2"></i>我的请求
                            </a>
                        </div>
                    </form>
                </div>
            </div>
            
            <!-- 请求列表 -->
            <div class="row">
                <!-- 动态数据 -->
                <div class="col-md-4 mb-4" th:each="request : ${requests}">
                    <div class="card h-100 request-card">
                        <div class="card-body">
                            <div class="d-flex mb-3">
                                <div class="flex-shrink-0">
                                    <img th:src="${request.coverUrl != null ? request.coverUrl : '/img/default-book-cover.jpg'}" 
                                         class="request-cover" width="80" alt="书籍封面">
                                </div>
                                <div class="flex-grow-1 ms-3">
                                    <h5 class="card-title" th:text="${request.title}">书籍标题</h5>
                                    <p class="card-text mb-1">
                                        <small class="text-muted" th:text="${request.author}">作者名</small>
                                    </p>
                                    <div class="mt-1">
                                        <span class="badge bg-secondary me-1" th:if="${request.publisher != null && !request.publisher.isEmpty()}"
                                             th:text="${request.publisher}">出版社</span>
                                        <span class="badge bg-info" th:if="${request.language != null && !request.language.isEmpty()}"
                                             th:text="${request.language}">英语</span>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="request-meta mb-3">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div class="want-count">
                                        <i class="fas fa-users text-primary"></i>
                                        <span th:text="${request.wantCount + ' 人想要'}">15 人想要</span>
                                    </div>
                                    <div class="status" th:if="${request.status != null}">
                                        <span class="badge" 
                                              th:classappend="${
                                                  request.status == '待上传' ? 'bg-warning' : 
                                                  (request.status == '待审核' ? 'bg-info' : 'bg-success')
                                              }"
                                              th:text="${request.status}">待上传</span>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="d-grid gap-2">
                                <!-- 已登录用户 -->
                                <div sec:authorize="isAuthenticated()">
                                    <button class="btn btn-outline-primary want-button" th:disabled="${request.userWanted}"
                                            th:data-request-id="${request.requestId}">
                                        <i class="far fa-heart me-1" th:classappend="${request.userWanted ? 'fas' : 'far'}"></i>
                                        <span th:text="${request.userWanted ? '已表示想要' : '我想要'}">我想要</span>
                                    </button>
                                    <a th:href="@{'/books/upload?requestId=' + ${request.requestId}}" class="btn btn-success mt-2">
                                        <i class="fas fa-upload me-1"></i>上传此书
                                    </a>
                                </div>
                                
                                <!-- 未登录用户 -->
                                <div sec:authorize="!isAuthenticated()">
                                    <a th:href="@{/login}" class="btn btn-outline-primary">
                                        <i class="far fa-heart me-1"></i>登录后表示想要
                                    </a>
                                    <a th:href="@{/login}" class="btn btn-success mt-2">
                                        <i class="fas fa-upload me-1"></i>登录后上传
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer text-muted">
                            <small>
                                <i class="fas fa-calendar-alt me-1"></i>
                                <span th:text="${#temporals.format(request.createdAt, 'yyyy-MM-dd')}">2023-01-15</span>
                            </small>
                        </div>
                    </div>
                </div>
                
                <!-- 静态数据（当没有动态数据时显示） -->
                <div class="col-md-4 mb-4" th:if="${requests == null || #lists.isEmpty(requests)}">
                    <div class="card h-100 request-card">
                        <div class="card-body">
                            <div class="d-flex mb-3">
                                <div class="flex-shrink-0">
                                    <img src="/img/default-book-cover.jpg" class="request-cover" width="80" alt="书籍封面">
                                </div>
                                <div class="flex-grow-1 ms-3">
                                    <h5 class="card-title">高级算法分析</h5>
                                    <p class="card-text mb-1">
                                        <small class="text-muted">张教授</small>
                                    </p>
                                    <div class="mt-1">
                                        <span class="badge bg-secondary me-1">计算机出版社</span>
                                        <span class="badge bg-info">简体中文</span>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="request-meta mb-3">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div class="want-count">
                                        <i class="fas fa-users text-primary"></i>
                                        <span>25 人想要</span>
                                    </div>
                                    <div class="status">
                                        <span class="badge bg-warning">待上传</span>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="d-grid gap-2">
                                <button class="btn btn-outline-primary" disabled>
                                    <i class="fas fa-heart me-1"></i>已表示想要
                                </button>
                                <a href="/books/upload?requestId=1" class="btn btn-success mt-2">
                                    <i class="fas fa-upload me-1"></i>上传此书
                                </a>
                            </div>
                        </div>
                        <div class="card-footer text-muted">
                            <small>
                                <i class="fas fa-calendar-alt me-1"></i>
                                <span>2023-01-15</span>
                            </small>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 mb-4" th:if="${requests == null || #lists.isEmpty(requests)}">
                    <div class="card h-100 request-card">
                        <div class="card-body">
                            <div class="d-flex mb-3">
                                <div class="flex-shrink-0">
                                    <img src="/img/default-book-cover.jpg" class="request-cover" width="80" alt="书籍封面">
                                </div>
                                <div class="flex-grow-1 ms-3">
                                    <h5 class="card-title">数据分析实战</h5>
                                    <p class="card-text mb-1">
                                        <small class="text-muted">王数据</small>
                                    </p>
                                    <div class="mt-1">
                                        <span class="badge bg-secondary me-1">数据出版社</span>
                                        <span class="badge bg-info">简体中文</span>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="request-meta mb-3">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div class="want-count">
                                        <i class="fas fa-users text-primary"></i>
                                        <span>18 人想要</span>
                                    </div>
                                    <div class="status">
                                        <span class="badge bg-info">待审核</span>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="d-grid gap-2">
                                <button class="btn btn-outline-primary">
                                    <i class="far fa-heart me-1"></i>我想要
                                </button>
                                <a href="/books/upload?requestId=2" class="btn btn-success mt-2">
                                    <i class="fas fa-upload me-1"></i>上传此书
                                </a>
                            </div>
                        </div>
                        <div class="card-footer text-muted">
                            <small>
                                <i class="fas fa-calendar-alt me-1"></i>
                                <span>2023-01-20</span>
                            </small>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 mb-4" th:if="${requests == null || #lists.isEmpty(requests)}">
                    <div class="card h-100 request-card">
                        <div class="card-body">
                            <div class="d-flex mb-3">
                                <div class="flex-shrink-0">
                                    <img src="/img/default-book-cover.jpg" class="request-cover" width="80" alt="书籍封面">
                                </div>
                                <div class="flex-grow-1 ms-3">
                                    <h5 class="card-title">现代文学赏析</h5>
                                    <p class="card-text mb-1">
                                        <small class="text-muted">李文学</small>
                                    </p>
                                    <div class="mt-1">
                                        <span class="badge bg-secondary me-1">文学出版社</span>
                                        <span class="badge bg-info">简体中文</span>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="request-meta mb-3">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div class="want-count">
                                        <i class="fas fa-users text-primary"></i>
                                        <span>15 人想要</span>
                                    </div>
                                    <div class="status">
                                        <span class="badge bg-success">完成</span>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="d-grid gap-2">
                                <button class="btn btn-outline-primary" disabled>
                                    <i class="far fa-heart me-1"></i>我想要
                                </button>
                                <a href="/books/view/3" class="btn btn-primary mt-2">
                                    <i class="fas fa-book-open me-1"></i>查看此书
                                </a>
                            </div>
                        </div>
                        <div class="card-footer text-muted">
                            <small>
                                <i class="fas fa-calendar-alt me-1"></i>
                                <span>2023-01-10</span>
                            </small>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 分页控件 -->
            <nav aria-label="Page navigation" th:if="${totalPages > 1}">
                <ul class="pagination justify-content-center">
                    <li class="page-item" th:classappend="${currentPage == 1} ? 'disabled' : ''">
                        <a class="page-link" 
                           th:href="@{'/requests?page=' + ${currentPage - 1} + ${languageParam} + ${sortParam}}" 
                           aria-label="上一页">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    
                    <li class="page-item" th:each="i : ${#numbers.sequence(1, totalPages)}" 
                        th:classappend="${i == currentPage} ? 'active' : ''">
                        <a class="page-link" 
                           th:href="@{'/requests?page=' + ${i} + ${languageParam} + ${sortParam}}" 
                           th:text="${i}">1</a>
                    </li>
                    
                    <li class="page-item" th:classappend="${currentPage == totalPages} ? 'disabled' : ''">
                        <a class="page-link" 
                           th:href="@{'/requests?page=' + ${currentPage + 1} + ${languageParam} + ${sortParam}}" 
                           aria-label="下一页">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
            
            <!-- 静态分页示例（当没有动态数据时显示） -->
            <nav aria-label="Page navigation" th:if="${totalPages == null || totalPages <= 1}">
                <ul class="pagination justify-content-center">
                    <li class="page-item disabled">
                        <a class="page-link" href="#" aria-label="上一页">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <li class="page-item active"><a class="page-link" href="#">1</a></li>
                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                    <li class="page-item">
                        <a class="page-link" href="#" aria-label="下一页">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
        
        <!-- 添加新请求模态框 -->
        <div class="modal fade" id="newRequestModal" tabindex="-1" aria-labelledby="newRequestModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="newRequestModalLabel">添加新书籍请求</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <form th:action="@{/api/request/create}" method="post" id="newRequestForm">
                            <div class="mb-3">
                                <label for="isbn" class="form-label">ISBN</label>
                                <div class="input-group">
                                    <input type="text" class="form-control" id="isbn" name="isbn" 
                                           placeholder="请输入10位或13位ISBN">
                                    <button class="btn btn-outline-secondary" type="button" id="searchIsbnBtn">
                                        <i class="fas fa-search"></i> 查询
                                    </button>
                                </div>
                                <div class="form-text">输入ISBN后点击查询，可自动填充书籍信息</div>
                            </div>
                            
                            <div id="bookInfoFields">
                                <div class="mb-3">
                                    <label for="title" class="form-label">书名 <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="title" name="title" required>
                                </div>
                                <div class="mb-3">
                                    <label for="author" class="form-label">作者</label>
                                    <input type="text" class="form-control" id="author" name="author">
                                </div>
                                <div class="mb-3">
                                    <label for="publisher" class="form-label">出版社</label>
                                    <input type="text" class="form-control" id="publisher" name="publisher">
                                </div>
                                <div class="mb-3">
                                    <label for="pubYear" class="form-label">出版年份</label>
                                    <input type="number" class="form-control" id="pubYear" name="pubYear" 
                                           min="1900" max="2100">
                                </div>
                                <div class="mb-3">
                                    <label for="language" class="form-label">语言</label>
                                    <select class="form-select" id="requestLanguage" name="language">
                                        <option value="简体中文">简体中文</option>
                                        <option value="繁体中文">繁体中文</option>
                                        <option value="英语">英语</option>
                                        <option value="日语">日语</option>
                                        <option value="其他">其他</option>
                                    </select>
                                </div>
                                <div class="mb-3">
                                    <label for="coverImage" class="form-label">封面图片</label>
                                    <input type="file" class="form-control" id="coverImage" name="coverImage" 
                                           accept="image/*">
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                        <button type="submit" form="newRequestForm" class="btn btn-primary">提交请求</button>
                    </div>
                </div>
            </div>
        </div>
        
        <style>
            .request-cover {
                border-radius: 4px;
                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            }
            .request-card {
                transition: transform 0.3s ease;
            }
            .request-card:hover {
                transform: translateY(-5px);
                box-shadow: 0 10px 20px rgba(0,0,0,0.1);
            }
            .want-count {
                font-weight: 500;
            }
        </style>
        
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                // "我想要"按钮点击事件
                const wantButtons = document.querySelectorAll('.want-button');
                wantButtons.forEach(button => {
                    button.addEventListener('click', function() {
                        const requestId = this.getAttribute('data-request-id');
                        
                        // 发送AJAX请求
                        fetch(`/api/request/${requestId}/want`, {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': document.querySelector('meta[name="_csrf"]')?.getAttribute('content')
                            }
                        })
                        .then(response => response.json())
                        .then(data => {
                            if (data.status === 200) {
                                // 更新按钮状态
                                this.disabled = true;
                                this.innerHTML = '<i class="fas fa-heart me-1"></i> 已表示想要';
                                
                                // 更新想要人数
                                const wantCountElement = this.closest('.card-body').querySelector('.want-count span');
                                wantCountElement.textContent = `${data.data.wantCount} 人想要`;
                                
                                // 显示成功提示
                                alert('已成功添加到您的请求列表！');
                            } else {
                                alert('操作失败: ' + data.message);
                            }
                        })
                        .catch(error => {
                            console.error('Error:', error);
                            alert('操作失败，请稍后再试');
                        });
                    });
                });
                
                // ISBN查询功能
                document.getElementById('searchIsbnBtn').addEventListener('click', function() {
                    const isbn = document.getElementById('isbn').value.trim();
                    if (!isbn) {
                        alert('请输入ISBN');
                        return;
                    }
                    
                    // 显示加载状态
                    this.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> 查询中';
                    this.disabled = true;
                    
                    // 模拟API调用
                    setTimeout(() => {
                        // 这里应该替换为实际的API调用
                        const isbnPattern = /^(978|979)?\d{9}(\d|X)$/;
                        if (isbnPattern.test(isbn)) {
                            // 模拟找到书籍信息
                            document.getElementById('title').value = '数据科学导论';
                            document.getElementById('author').value = '张教授';
                            document.getElementById('publisher').value = '计算机出版社';
                            document.getElementById('pubYear').value = '2022';
                            document.getElementById('requestLanguage').value = '简体中文';
                        } else {
                            alert('未找到该ISBN对应的书籍信息，请手动填写');
                        }
                        
                        // 恢复按钮状态
                        this.innerHTML = '<i class="fas fa-search"></i> 查询';
                        this.disabled = false;
                    }, 1000);
                });
            });
        </script>
    </section>
</body>
</html> 